<template>
  <div>
    <nav-bar/>
    <!-- <tags-view></tags-view> -->
    <div class="container" :class="isCollapse?'hideBar':'showBar'">
      <div class="rzzx-con">
        <side-bar/>
        <router-view class=" rzzx-con-rg"></router-view>
      </div>
    </div>
    <div class="fixGuid" id="fixGid">
      <div class="fix-Guid-item">
        <span><img src="../assets/guid-qq.png"></span>
        <div class="fix-guid-hid QQkf">
          <span>在线客服</span>
          <a v-if="cooperation.list.length" v-for="(item, index) in cooperation.list" :key="index" target="_blank" :href="`http://wpa.qq.com/msgrd?v=3&uin=${item.content}&site=qq&menu=yes`">
            <img src="../assets/QQkf.png">
            <span>{{item.title}}</span>
          </a>
        </div>
      </div>
      <div class="fix-Guid-item">
        <span><img src="../assets/guid-we.png"></span>
        <div class="fix-guid-hid">
          <span>官方公众号</span>
          <p><img :src="cooperation.wechatUrl" style="width: 150px;height:150px;"></p>
        </div>
      </div>
      <div class="fix-Guid-item">
        <span><img src="../assets/guid-phone.png"></span>
        <div class="fix-guid-hid fix-guid-phone">
          <span>咨询热线</span>
          <p style="font-size: 16px">
            <b>{{cooperation.phone}}</b>
          </p>
          <p>工作日：9:00-18:00</p>
        </div>
      </div>
      <div class="fix-Guid-item" onclick="window.scollGuid()" id="guidToTop">
        <span class="layui-icon layui-icon-up"></span>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import NavBar from './nav-bar'
import SideBar from './side-bar'
import Footer from './footer'
import { mapState } from 'vuex'
// import TagsView from './tags-view'
export default {
  components: {
    NavBar,
    SideBar,
    Footer
  },
  data () {
    return {
      viewportHeight: 600
    }
  },
  computed: {
    ...mapState({
      cooperation: state => state.me.cooperation || {}
    }),
    styles () {
      return {
        minHeight: this.viewportHeight - 72 + 'px'
      }
    },
    isCollapse () {
      return this.$store.state.toggleBar
    }
  },
  created () {
  },
  mounted () {
    window.addEventListener('resize', this.getViewportHeight(), false)
    // window.scollGuidFix()
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.getViewportHeight())
  },
  methods: {
    getViewportHeight () {
      this.viewportHeight = document.documentElement.clientHeight || document.body.clientHeight
      // return throttle(100, e => {
      //   this.viewportHeight = document.documentElement.clientHeight || document.body.clientHeight
      // })
    }
  }
}
</script>

<style lang="scss">
.container {
  position: relative;
  // margin-left: $sidebar-width;
  // margin-top: $navbar-height;
  // padding: 20px 20px 50px;
  // min-width: 1200px - 240px;
  width: auto;
  // background: #ebeef5;
  min-height: calc(100vh - 72px);
  width: 1200px;
  margin: 0 auto;
  // transition: margin-left .5s;
}

.container.hideBar {
  // margin-left: 60px !important;
}
.container.showBar {
  // margin-left: $sidebar-width !important;
}
</style>
